<template>
  <div class="container">
    <a-tabs default-active-key="1" tab-position="right" class="tab">
      <a-tab-pane key="1" tab="直播结束----研究生复试之高效准备简历的方法">
        <img src="https://online-course.nos-eastchina1.126.net/123-1252130152859566080.png" alt="">
        <div class="masking">
          <p>研究生复试之高效准备简历的方法</p>
          <p><a-icon type="check-circle" />直播结束</p>
          <p>直播结束</p>
        </div>
      </a-tab-pane>
      <a-tab-pane key="2" tab="直播结束----十大经典排序之Part-6-完结篇">
        <img src="https://online-course.nos-eastchina1.126.net/数据结构与算法 基础篇 拷贝-1252123020651134976.jpg" alt="">
        <div class="masking">
          <p> 十大经典排序之Part-6-完结篇</p>
          <p><a-icon type="check-circle" />直播结束</p>
          <p>直播结束</p>
        </div>
      </a-tab-pane>
      <a-tab-pane key="3" tab="直播结束----jdk1.8-新特性之函数式接口与方法调用">
        <img src="https://online-course.nos-eastchina1.126.net/封面-1258625253353979904.png" alt="">
        <div class="masking">
          <p> jdk1.8-新特性之函数式接口与方法引用</p>
          <p><a-icon type="check-circle" />直播结束</p>
          <p>直播结束</p>
        </div>
      </a-tab-pane>
      <a-tab-pane key="4" tab="05-08 23:00----高考之殇、痛则思变">
        <img src="https://online-course.nos-eastchina1.126.net/直播封面-1254953535796150272.png" alt="">
        <div class="masking">
          <p> 高考之殇与痛则思变</p>
          <p><a-icon type="check-circle" />尚未开播</p>
          <p>尚未开播</p>
        </div>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
export default {
  name: "AudioTab"
}
</script>

<style scoped lang="less">
.container {
  margin: 20px 0;
}
.title {
  font-size: 30px;
  text-align: center;
  margin: 30px 0 20px 0;
}
.tab {
  width: 1200px;
  margin: 0 auto;
}
/deep/.ant-tabs .ant-tabs-right-bar {
  width: 600px;
  height: 350px;
  background-color: #F4F4F4;
}
.ant-tabs-tabpane-active {
  width: 600px;
  height: 350px;
  position: relative;
  img {
    width: 100%;
    height: 100%;
  }
}
.masking {
  position: absolute;
  z-index: 5;
  top: 0;
  width: 100%;
  background-color: rgba(0,0,0,.6);
  height: 100%;
  text-align: center;
  color: white;
  p:nth-of-type(1) {
    font-size: 24px;
    margin: 60px 0 40px 0;
  }
  p:nth-of-type(2) {
    i {
      margin-right: 10px;
    }
  }
  p:nth-of-type(3) {
    font-size: 20px;
    line-height: 50px;
    width: 180px;
    height: 50px;
    margin: 30px auto;
    background-color: #00cf8c;
    border-radius: 5px;
    cursor: pointer;
  }
}
</style>